import React from 'react'
// prettier-ignore
import {
  StyleSheet,
  View,
  Text,
  Platform,
  ActivityIndicator,
  // RefreshControl,
  TouchableOpacity,
} from 'react-native'

import PropTypes from 'prop-types'

const RxRefreshHeader = props => {
  const {hidden, appHeader, ...other} = props

  if (hidden) return null

  if (Platform.OS === 'web') {
    return <RenderWeb {...other} />
  }

  return appHeader
}

const RenderWeb = props => {
  const {refreshing, style, onPress} = props
  if (refreshing) {
    return (
      <View style={[styles.container, style]}>
        <ActivityIndicator animating={true} />
        {/* <RefreshControl refreshing={true} onRefresh={()=>{}}/> */}
      </View>
    )
  }

  return (
    <TouchableOpacity
      style={[styles.container, style]}
      onPress={() => onPress && onPress()}>
      <Text style={styles.textPre}>
        点击<Text style={styles.textSuf}>刷新获取最新数据</Text>
      </Text>
    </TouchableOpacity>
  )
}

RxRefreshHeader.propTypes = {
  ...View.propTypes,
  hidden: PropTypes.bool,
  refreshing: PropTypes.bool,
  appHeader: PropTypes.element,
  onPress: PropTypes.func,
}

RxRefreshHeader.defaultProps = {
  ...View.defaultProps,
  hidden: false,
  refreshing: false,
  appHeader: null,
  onPress: () => {},
}

export default RxRefreshHeader

const styles = StyleSheet.create({
  container: {
    marginTop: 12,
    justifyContent: 'center',
    alignItems: 'center',
  },
  textPre: {
    fontSize: 12,
    color: 'blue',
  },
  textSuf: {
    color: '#999999',
  },
})
